<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vue中的MVVM</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
      MVVM 模型
          M：模型(Model): data 中的数据
          V：视图(View): 模板代码
          VM：视图模型(ViewModel): Vue 实例
      观察发现：
          data中的所有属性，最后都出现在了 vm 身上。
          vm 身上的所有的属性及 Vue 原型上所有属性，在 Vue 模板中都可以直接时候用。
    -->
    <!-- 准备一个容器 -->
    <div id="root">
      <h1>学校名称：{{name}}</h1>
      <h1>学校地址：{{address}}</h1> 
      <h1>测试一下：{{$options}}</h1>
    </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; // 组织 Vue 在启动时生成生产提示

    const vm = new Vue({
      el: '#root',
      data: {
        name: '尚硅谷',
        address: '江西南昌'
      }
    })
    console.log(vm)
</script>
</html>